// Created by Joe on 2017/6/16.

/**
 * control: {
 *  title<String>,
 *  button: { name<String>, action<Function> }[2],
 *  }
 * panel: { show<boolean> }
 */

app.directive(
    'bindPopup',
    [
        'KEY',
        function (KEY) {
            return {
                restrict: 'E',
                scope: {
                    control: '=',
                    panel: '='
                },
                template: '<div>' +
                '<div class="bp__mask"></div>' +
                '<div class="bp__setting">' +
                '<span class="bp__title">{{title}}</span>' +
                '<p class="bp__btn" id="bp__btn-left">{{button[0].name}}</p>' +
                '<p class="bp__btn" id="bp__btn-right">{{button[1].name}}</p>' +
                '</div></div>',
                link: function (scope, ele) {
                    // selector handler
                    scope.selector = {$btn: ele.find('.bp__btn')};

                    // set focus
                    scope.focus = 0;

                    // data communication
                    scope.title = scope.control.title || '主题';
                    scope.button = scope.control.button;

                    // init
                    scope.selector.$btn.eq(0).addClass('bp__btn--focus');

                    // add action
                    var moveHandler = function () {
                        switch (event.keyCode) {
                            case KEY.LEFT:
                                if (scope.focus === 1) {
                                    scope.selector.$btn
                                        .eq(scope.focus--)
                                        .removeClass('bp__btn--focus');
                                    scope.selector.$btn
                                        .eq(scope.focus)
                                        .addClass('bp__btn--focus');
                                }
                                break;
                            case KEY.RIGHT:
                                if (scope.focus === 0) {
                                    scope.selector.$btn
                                        .eq(scope.focus++)
                                        .removeClass('bp__btn--focus');
                                    scope.selector.$btn
                                        .eq(scope.focus)
                                        .addClass('bp__btn--focus');
                                }
                                break;
                            case KEY.ENTER:
                                scope.$apply(function () {
                                    scope.panel.show = false;
                                    scope.button[scope.focus].action instanceof Function
                                    && scope.button[scope.focus].action();
                                });
                                break;
                            default:
                                event.preventDefault();
                        }
                    };

                    document.addEventListener('keydown', moveHandler);

                    ele.on('$destroy', function () {
                        document.removeEventListener('keydown', moveHandler);
                    });
                }
            };
        }
    ]
);